<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import type { Ref } from "vue";
import { getLabelList, getSayInfo } from "@/api/say";
import { useCounterStore } from "@/stores/counter";
import { useRouter } from "vue-router";
const useStore = useCounterStore();
const router = useRouter();

// 搜索框
const search: Ref<string> = ref("");
function searchInput() {}

// 标签栏
const active: Ref<number> = ref(0);
const labelList: Ref<{ label: string }[]> = ref([]);
// 标签栏列表获取
async function gLabelList() {
  let res = await getLabelList();
  labelList.value = res.data.data;
}
// 获取分类信息
interface IInfoList {
  desc: string;
  hospital: string;
  id: number;
  image: string;
  kinds: string;
  name: string;
  position: string;
  text: string;
}
const kindInfoList: Ref<IInfoList[]> = ref([]);
async function kindInfo() {
  let res = await getSayInfo({ kind: labelList.value[active.value].label });
  kindInfoList.value = res.data;
}
// 跳转详情页
function jumpDetails(id: number) {
  useStore.getSayId(id);
  router.push("/saydetail");
}
// 挂载后
onMounted(async () => {
  await gLabelList();
  await kindInfo();
});
// 侦听
watch(active, async () => {
  await kindInfo();
});

function upAddress() { router.push('/city') }
</script>

<template>
  <div class="header">
    <div @click="upAddress">
      <van-icon name="location" />
      <span v-if="useStore.city"> {{ useStore.city }}</span> <span v-else>北京</span>
    </div>
    <van-search
      v-model="search"
      placeholder="请输入搜索关键词"
      @input="searchInput"
    />
    <van-icon name="chat-o" />
  </div>
  <!-- 导航栏 -->
  <div class="main">
    <van-tabs v-model:active="active">
      <van-tab
        v-for="value in labelList"
        :key="value.label"
        :title="value.label"
      >
        <van-card
          v-for="item in kindInfoList"
          :key="item.id"
          :desc="item.desc"
          :title="item.text"
          :thumb="item.image"
          @click="jumpDetails(item.id)"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
.header {
  height: 0.44rem;
  font-size: 0.2rem;
  display: flex;
  align-items: center;
}
.van-search {
  flex: 1;
  background-color: #f7fdff;
}
.van-icon {
  width: 0.2rem;
  padding: 0 0.05rem;
}
.main {
  overflow: auto;
}
</style>
